<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>上传图片 - UnaBoot</title>
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css"/>
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <style>
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <form id="thumb-form" class="mt-3 form-inline">
                <div class="input-group">
                    <input type="file" accept="image/*" name="thumb" id="thumb" onchange="uploadFile();" style="opacity: 0;width: 0;height: 0;">
                    <input type="text" name="url" placeholder="图片地址" style="-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;" class="form-control"/>
                    <button type="button" class="btn btn-default ml-2 local-upload">本地上传</button>
                </div>
            </form>
            <div class="pl-4 pt-2 pr-4 pb-2 bg-gray-light text-right fixed-bottom">
                <button type="button" id="close" class="btn btn-default pull-right">取消</button>
                <button type="button" id="save" class="btn btn-primary pull-right mr-2">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="${una}/ub-admin/plugin/jquery/jquery.min.js"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
<script src="${una}/ub-admin/plugin/jquery/jquery.form.js"></script>
<script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${una}/ub-admin/js/adminlte.js"></script>
<script type="text/javascript" src="${una}/ub-admin/plugin/layer/layer.js"></script>
<script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".local-upload").on("click",function(){
            $("#thumb").trigger("click");
        });
        $("#save").on("click",function(){
            var url = $("input[name=url]").val();
            var index = parent.layer.getFrameIndex(window.name);
            if(url !=""){
                parent.$("#thumb").val(url);
                parent.$("#thumb-preview").attr("src",url);
            }
            parent.layer.close(index);
        });
        $("#close").on("click",function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });

    function uploadFile(){
        var formData = new FormData();
        formData.append("img",$("#thumb")[0].files[0]);
        var loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
        $.ajax({
            url:'${una}/admin/upload/image',
            type:'POST',
            data:formData,
            processData:false,
            contentType:false,
            success:function(result){
                if(result.success == 1){
                    $("input[name=url]").val(result.url);
                }else{
                    alert(result.message);
                }
                layer.close(loading);
            },
            error:function(){
                layer.close(loading);
                alert("服务器异常");
            }
        });
    }
</script>
</body>
</html>
